<template>
    <div>
        <el-upload
                ref="upload"
                class="avatar-uploader"
                :action="serverUrl"
                name="file"
                :headers="headers"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
        <el-row v-loading="quillUpdateImg">
            <quill-editor class="ql-editor"
                          v-model="content"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                          @change="onEditorChange($event)">
            </quill-editor>
        </el-row>
    </div>
</template>

<script>
    const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{'header': 1}, {'header': 2}],               // custom button values
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
            [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
            [{'direction': 'rtl'}],                         // text direction

            [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
            [{'header': [1, 2, 3, 4, 5, 6, false]}],

            [{'color': []}, {'background': []}],          // dropdown with defaults from theme
            [{'font': []}],
            [{'align': []}],
            ['link', 'image', 'video'],
            ['clean']                                         // remove formatting button
        ]
    import {quillEditor} from 'vue-quill-editor'
    export default {
        name: "Editor",
        components:{
            quillEditor,
        },
        props:{
            content:{
                type: String,
                default:""
            }
        },
        model: {
            prop: 'content',
            event: 'input'
        },
        watch: {
            content(val) {
                this.$emit('input', val);
            }
        },
        data() {
            return {
                imgUrl:'',
                quillUpdateImg: false, // 图片上传加载动画
                // 图片上传url
                serverUrl:'/api/upload/uploadImg',
                // 图片上传请求头
                headers: {
                    token: localStorage.getItem('token')
                },
                // content:this.value,
                editorOption:{
                    placeholder:'请输入文本...',
                    theme:'snow',
                    modules:{
                        toolbar:{
                            container:toolbarOptions,  //工具栏
                            handlers:{
                                image: function (val) {
                                    console.log(val);
                                    if (val) {
                                        document.querySelector('.avatar-uploader input').click();
                                    } else {
                                        this.quill.format('image', false);
                                    }

                                }
                            }
                        }
                    }
                }
            }
        },
        methods:{
            uploadSuccess(res, file) {

                console.log(res, file);
                let quill = this.$refs.myQuillEditor.quill
                // 上传成功
                if (res.result === 0) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片
                    quill.insertEmbed(length, 'image', res.data);
                    // 调整光标到最后
                    quill.setSelection(length + 1);
                } else {
                    this.$message.error("插入图片失败");
                }
                this.quillUpdateImg = false;
            },
            uploadError() {
                // 动画消失
                this.quillUpdateImg = false;
                this.$message.error("图片上传失败");
            },
            beforeUpload(){
                // 显示加载动画
                this.quillUpdateImg = true;
            },
            onEditorBlur() {
                // 失去焦点
                this.$emit('change', this.content);

            },
            onEditorFocus() {
                //获得焦点时间
            },
            onEditorChange(el) {
                // 内容改变事件
                console.log(el)
            },

        },
    }
</script>

<style scoped>

</style>